<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="site/common::header('解决方案列表')" />
</head>
<body>
    <!-- 头部 -->
    <th:block th:include="site/common::navigation" />
    <!-- 面包屑 -->
    <div class="breadcroumb-area">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="breadcroumb-title text-center">
                        <h1>解决方案</h1>
                        <h5><a href="/">首页</a>/解决方案</h5>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--内容-->
    <div class="container" id="solution-list">
        <div class="row mb-5">
            <div class="col-lg-12 col-md-12 col-12 m-auto">
                <div class="title mt-5 mb-2">
                    <span>解决方案</span>
                </div>
                <div class="row grid-list">
                    <div class="col-lg-4 col-md-6 col-sm-12 grid-area" v-for="solution in solutions">
                        <div class="solution-area wow fadeInUp" data-wow-delay=".5s">
                            <div class="solution-bg">
                                <img v-bind:src="solution.cover">
                            </div>
                            <div class="solution-content">
                                <h3>{{solution.title}}</h3>
                                <a v-bind:href="'/solution/' + solution.id" target="_blank" class="read-more">查看详情</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12 mt-5 mb-5 more solution-more">
                    <a href="javascript:;">查看更多</a>
                </div>
            </div>
        </div>
        <div class="row mb-5">
            <div class="col-lg-12 col-md-12 col-12 m-auto">
                <div class="title mt-5 mb-2">
                    <span>案例</span>
                </div>
                <div class="row grid-list">
                    <div class="col-lg-4 col-md-6 col-sm-12 grid-area" v-for="_case in cases">
                        <div class="solution-area wow fadeInUp" data-wow-delay=".5s">
                            <div class="solution-bg">
                                <img v-bind:src="_case.cover">
                            </div>
                            <div class="solution-content">
                                <h3>{{_case.title}}</h3>
                                <a v-bind:href="'/case/' + _case.id" target="_blank" class="read-more">查看详情</a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-12 mt-5 mb-5 more case-more">
                    <a href="javascript:;">查看更多</a>
                </div>
            </div>
        </div>
    </div>
    <!-- 底部 -->
    <th:block th:include="site/common::footer" />
</body>
<th:block th:include="site/common::js" />
<script>
    var solutionPage = 1;
    var casePage = 1;

    var vm = new Vue({
        el: "#solution-list",
        data: {
            solutions: [],
            cases: []
        },
        mounted: function () {
            loadSolutions(false);
            loadCases(false);
        }
    });

    $(".solution-more").click(function () {
        solutionPage += 1;
        loadSolutions(false);
    });

    $(".case-more").click(function () {
        casePage += 1;
        loadCases(false);
    });

    function loadSolutions(empty) {
        var url = "/api/solution/" + solutionPage;
        $.get(url, function(result){
            if(empty) {
                vm.solutions = [];
            }
            if(result.code == 0) {
                for(var i =0; i< result.rows.length; i++) {
                    vm.solutions.push(result.rows[i]);
                }
            }
        });
    }

    function loadCases(empty) {
        var url = "/api/case/" + casePage;
        $.get(url, function(result){
            if(empty) {
                vm.cases = [];
            }
            if(result.code == 0) {
                for(var i =0; i< result.rows.length; i++) {
                    vm.cases.push(result.rows[i]);
                }
            }
        });
    }

</script>
</html>